<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习</title>
</head>

<body>
  <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
  <script type="module">
    // 官网地址
    import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js'
    const canvas = document.querySelector('#c2d')
    // 渲染器
    const renderer = new THREE.WebGLRenderer({ canvas })

    const fov = 40 // 视野范围
    const aspect = 2 // 相机默认值 画布的宽高比
    const near = 0.1 // 近平面
    const far = 1000 // 远平面
    // 透视投影相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

    // 相机位置 正下方向下看
    camera.position.set(0, 50, 0) // 相机位置
    camera.up.set(0, 0, 1)
    camera.lookAt(0, 0, 0) // 相机朝向

    // 创建场景
    const scene = new THREE.Scene()
    scene.background = new THREE.Color(0xaaaaaa)

    const color = 0xeeeeee
    const intensity = 1
    // 创建光源
    const light = new THREE.DirectionalLight(color, intensity)
    // 光源 加入场地
    scene.add(light)

    // 球体
    const radius = 4 // 半径
    const widthSegments = 16 // 经度上的切片数
    const heightSegments = 16 // 纬度上的切片数
    // 创建球体
    const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)

    // // 基础材质
    // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 })
    // // 网格
    // const mesh = new THREE.Mesh(sphereGeometry, material)
    // mesh.position.x = 10
    // scene.add(mesh)

    // // 基础材质
    // const material2 = new THREE.MeshBasicMaterial({ color: 0x44aa88, wireframe: true })
    // // 网格
    // const mesh2 = new THREE.Mesh(sphereGeometry, material2)
    // mesh2.position.x = 0
    // scene.add(mesh2)

    // 基础材质
    const material = new THREE.MeshLambertMaterial({ color: 0x44aa88 })
    // 网格
    const mesh = new THREE.Mesh(sphereGeometry, material)
    mesh.position.x = 5
    scene.add(mesh)

    function render(time) {
      time *= 0.001

      mesh.rotation.y = time
      mesh.rotation.x = time

      // mesh2.rotation.y = time
      // mesh2.rotation.x = time

      // 加载渲染器
      renderer.render(scene, camera)

      // 开始动画
      requestAnimationFrame(render)

    }
    // 开始渲染
    requestAnimationFrame(render)
  </script>
</body>

</html>